<template>
  <div>
    <a-modal v-model="visible" destroyOnClose :maskClosable="false" :title="title" @ok="submit"
      :confirm-loading="confirmLoading">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }">
        <a-form-model-item label="字典名称" prop="name">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="字典值" prop="value">
          <a-input v-model="form.value" :disabled="disabled" />
        </a-form-model-item>
        <a-form-model-item label="描述" prop="remarks">
          <a-input type="textarea" v-model="form.remarks" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { CommonModal } from '@/ryweb'
import { validatorFunction } from './dict'
export default {
  name: 'DictModal',
  mixins: [validatorFunction, CommonModal],
  props: ['url'],
  data () {
    return {
      visible: false,
      confirmLoading: false,
      title: '新增字典',
      form: {},
      rules: {
        projectId: [{
          required: true, message: '请选择项目名称', trigger: 'change'
        }],
        value: [
          { required: true, message: '请输入字典值', trigger: 'blur' },
          { max: 32, message: '最大长度32字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请填写字典名称', trigger: 'blur' }
        ],
        remarks: [{ max: 50, message: '最大长度50字符', trigger: 'blur' }]
      }
    }
  },
  mounted () { },
  methods: {
    add () {
      this.title = '新增'
      this.form = {
        dictType: '01'
      }
      this.type = '1'
      this.visible = true
    },
    edit (record) {
      this.title = '编辑'
      this.form = { ...record}
      this.type = '2'
      this.visible = true
    },
    view (record) {
      this.title = '详情'
      this.form = { ...record}
      this.type = '3'
      this.visible = true
    },
    submit () {
      this.form = { ...this.form}
      this.handleOk()
    }
  },
  computed: {
    disabled () {
      return this.form.hasOwnProperty('id')
    }
  }
}
</script>

<style scoped>
</style>
